// ButtonView  按钮控件
// ---
//
// className:ButtonView
// author: Vicent
//
// 配置
//
// | 变量 | 类型 | required | 描述 |
// |----|------|----------|-----|
// | id | string | true |控件id，当按钮配置有事件信息时必须与事件触发器中的target一致 |
// | triggers | array | false | 事件触发器,配置按钮事件在这个对象里 |
// | title | string | false | 按钮文本 |
// | style | string | false | 样式 |
// | btnOutlined | string | false | 边框 |
// | btnBlock | string | false | 块状样式 |
// | icon | string | false | 微章样式 |
// | iconPosition | string | false | 微章位置 |
//
// ```js
//
// {
//  id: "testbtn",
// type: "ButtonView",
// title: "提交",
// triggers: [{
//   target: "testbtn",
//   action: "call",
//   event: "click",
//   method: "btnclick",
//   arguments: {
//     arg1: "arg1",
//     arg2: "arg2"
//   }
// }]
// }
// ```
define(['./BaseView'], function(BaseView) {

    /*
    * outlined: 空心样式
    */
    return BaseView.extend({

        type: 'ButtonView',

        events: {
            "click .btn": "onClick"
        },

        _getStyleFromOptions:function(){
            var styleArr={};
            if (this.options.marginTop || this.options.marginRight || this.options.marginLeft || this.options.marginBottom) {
                styleArr["marginTop"] = this.options.marginTop + "px";
                styleArr["marginRight"] = this.options.marginRight + "px";
                styleArr["marginLeft"] = this.options.marginLeft + "px";
                styleArr["marginBottom"] = this.options.marginBottom + "px";
            }
            return styleArr;
        },

        render: function() {

            this.$el.empty();
            var $a = $('<a href="' + this.options.href + '"></a>'),
                $button = $('<button class="btn btn-' + this.options.btnStyle + '"></button>');

            // TODO 标识按钮类型的标记不统一，需要重构这里
            if(this.options.btnBlock == 'true') {
                $button.addClass('btn-block');
            }
            if(this.options.btnOutlined == 'style1') {
                $button.addClass('btn-outlined');
            }
            if(this.options.btnOutlined == 'style3') {
                $button.addClass('btn-radius-outlined');
            }
            if(this.options.btnOutlined == 'style4') {
                $button.addClass('btn-radius-primary');
            }

            $button.css({
                'background-color': this.options.bgColor
            });

            $a.append($button);
            this.$el.append($a);

            if(this.options.title) {
                var buttonText = document.createElement('span');
                $(buttonText).addClass('button-font-size');
                $(buttonText).html(this.options.title);
            }

            iconItem = this.options.iconItem || {};

            if (iconItem.display == "navIcon"){
                var iconShow = {};
                if(iconItem.type == "radius"){
                    iconShow['background'] = iconItem.bgcolor;
                    iconShow['border-radius'] = "50%";
                    iconShow['color'] = "white";
                }else if (iconItem.type == "rectangle") {
                    iconShow['background'] = iconItem.bgcolor;
                    iconShow['color'] = "white";
                    iconShow['border-radius'] = "0";
                }else if (iconItem.type == "none") {

                    if(iconItem.color == "white"){
                        iconItem.color = "#ccc";
                        iconShow['border-radius'] = "0";
                    }
                    iconShow['color'] = iconItem.color;
                }

                var icon = document.createElement('span');
                backgroundStyle = $('<div></div>').css(iconShow).addClass("list-icon-block").addClass(iconItem.icon);
                $button.append(backgroundStyle);

                if (buttonText) {
                    $button.append(buttonText);
                }
            } else {

                var img = $("<img width=20 height=20 style='margin:0 5px' />");
                img.attr('src', iconItem.icon);
                if(iconItem.icon){
                    $button.append(img);
                }
                if (buttonText) {
                    $button.append(buttonText);
                }
            }
            if (this.options.positionHeight){
                $button.css({height: this.options.positionHeight});
            }
            if (this.options.positionWidth){
                var width = this.options.positionWidth + "%";
                $button.css({width: width});
            }
            if(this.options.buttonPosition) {
                if(this.options.buttonPosition != "center"){
                    $button.css({float: this.options.buttonPosition, marginTop: "0px"});
                    $(this.el).css({overflow: "hidden"});
                }else{
                    $button.css({marginLeft: "auto", marginRight: "auto"});
                }
            }
            //$(this.el).css({marginTop: "0px", marginBottom: "0px"});
            $button.css({marginTop: "0px", marginBottom: "0px", padding: "0px"});
            this.$el.css(this._getStyleFromOptions());

            if (this.options.badge) {
                var span = document.createElement('span');
                var arr = this.options.badge.split(',');
                span.classList.add('badge');
                arr.forEach(function(item, index) {
                    span.classList.add('badge-' + item);
                });
                span.innerHTML = this.options.badgeHTML;
                $button.append(span);
            }

            return this;
        },

        onClick: function(e) {
            this.triggerEvent("click");
        }
    });
});
